<template>
    <div class="app-container">
      <!-- 公共顶部 -->
      <large-screen-header to="/buildHouse/reinforceClassicCase" :back="true"/>
      <!-- 主体部分 -->
      <div class="app-main">
        <!-- 中心部分 -->
        <div class="app-center">
          <!-- 标题 -->
          <headline :name="route.query.name" />
          <el-row type="flex"  justify="space-around">
          	<el-col :span="10"  class="fontStyle">
          		<el-row>
          			<el-col :span="7">
          				工程类型：{{form.type}}
          			</el-col>
          			<el-col :span="7">
          				数据范围：{{form.location}}
          			</el-col>
          			<el-col :span="10">
          				工程类别：{{form.category}}
          			</el-col>
          		</el-row>         		
          	</el-col>
          	<el-col :span="12"  class="fontStyle">
          		<el-row>
          			<el-col :span="2">
          				报告：
          			</el-col>
          			<el-col :span="22" class="fontStyle1">
          				<span v-for="(item, index) in form.list" :key="index">
          					<span @click="downLoad(item.url)">{{item.name}}</span>
          				</span>
          				<!--《地震易发区房屋设施加固工程典型案例附件一》《地震易发区房屋设施加固工程典型案例附件二》-->
          			</el-col>
          		</el-row>
          		
          	</el-col>
          </el-row>
          <el-row>
          	<el-col>
          		<div class="app-left-item">
			          <subheadings :name="'施工前照片'" />	
			          <div class="assy-inner-img">
									<el-carousel ref="carouselRef" class="carousel" :autoplay="true" :interval="3000" indicator-position="outside" arrow="never" height="270px" v-if="prePhotosListData[0]">
							     	<el-carousel-item v-for="item in prePhotosListData" :key="item">
							      	<img class="banner-img" :src="item.imgUrl" :alt="item">
								    </el-carousel-item>
								    
								  </el-carousel>
								</div>
			        </div>
			        <div class="app-left-item">
			          <subheadings :name="'工程亮点'" />
								<div class="assy-inner-text">
									{{form.brightSpot}}
									
								</div>

			        </div>
			        <div class="app-left-item">
			          <subheadings :name="'竣工验收照片'" />
			          <div class="assy-inner-img">
									<el-carousel ref="carouselRef" class="carousel" :autoplay="true" :interval="3000" indicator-position="outside" arrow="never" height="270px" v-if="checkPhotosListData[0]">
								    <el-carousel-item v-for="item in checkPhotosListData" :key="item">
								      <img class="banner-img" :src="item.imgUrl" :alt="item">
								    </el-carousel-item>
								  </el-carousel>
								</div>
			        </div>
			        <div class="app-left-item">
			          <subheadings :name="'评审意见'" />
			          <div class="assy-inner-text">
									{{form.opinion}}
								</div>
			        </div>
          	</el-col>         
          </el-row>	
          <el-row>
          	<el-col>
          		<div class="app-right-item">
			          <subheadings :name="'工程简介'" />
			          <div class="assy-inner-text">
									{{form.briIntroduction}}
								</div>
			        </div>
			        <div class="app-right-item">
			          <subheadings :name="'施工过程照片'" />
			          <div class="assy-inner-img">
									<el-carousel ref="carouselRef" class="carousel" :autoplay="true" :interval="3000" indicator-position="outside" arrow="never" height="270px" v-if="courcePhotosListData[0]">
								    <el-carousel-item v-for="item in courcePhotosListData" :key="item">
								      <img class="banner-img" :src="item.imgUrl" :alt="item">
								    </el-carousel-item>	  
								  </el-carousel>
								</div>
			        </div>
			        <div class="app-right-item">
			          <subheadings :name="'工程效果'" />
			          <div class="assy-inner-text">
									{{form.result}}
								</div>
			        </div>
			        <div class="app-right-item">
			          <subheadings :name="'图纸'" />
			          <div class="assy-inner-img">
									<el-carousel ref="carouselRef" class="carousel" :autoplay="true" :interval="3000" indicator-position="outside" arrow="never" height="270px" v-if="drawingListData[0]">
								    <el-carousel-item v-for="item in drawingListData" :key="item">
								      <img class="banner-img" :src="item.imgUrl" :alt="item">
								    </el-carousel-item>	  
								  </el-carousel>
								</div>
			        </div>
          	</el-col>         
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script setup name="Index">
  import { useRouter } from "vue-router"; 
  import { getViewDetails, downLoadByUrl } from '@/api/buildHouse.js';	
  import SystemCondition from '../components/SystemCondition.vue';
	import NewCollectSituation from '../components/NewCollectSituation.vue';
	import NewCaseStatistics from '../components/NewCaseStatistics.vue';
	import NewInventoryRanking from '../components/NewInventoryRanking.vue';
	import NewCategoryStatistics from '../components/NewCategoryStatistics.vue';
	import NewWareHousing from '../components/NewWareHousing.vue';
  import point_house_img from '@/assets/map/image/newImage/point_house.png';
  
  const route = useRoute();


  const form = ref({});
  const vectorLayer = ref(null);
  const overlayLayer = ref(null);
  const pointsLayer = ref(null);
  const selectInteraction = ref(null); // 选择交互对象
  const router = useRouter()
// 轮播图对象
const carouselRef = ref();
const prePhotosListData = ref([]);
const checkPhotosListData = ref([]);
const courcePhotosListData = ref([]);
const drawingListData = ref([]);
  
  const getData = () => {
  	console.log(route.query.id)
  	getViewDetails(route.query.id).then((res) => {
			//console.log(res.data)
			form.value = res.data     
      if(form.value.type == "0"){
        form.value.type = "加固工程"
      }else if(form.value.type == "1"){
        form.value.type = "新建工程"
      }
      if(form.value.category == "0"){
        form.value.category = "大中小学校"
      }else if(form.value.category == "1"){
        form.value.category = "城镇住宅"
      }else if(form.value.category == "2"){
        form.value.category = "医院"
      }else if(form.value.category == "3"){
        form.value.category = "危险化学品厂"
      }else if(form.value.category == "4"){
        form.value.category = "电信网络"
      }else if(form.value.category == "5"){
        form.value.category = "电力网络"
      }else if(form.value.category == "6"){
        form.value.category = "农村居民"
      }else if(form.value.category == "7"){
        form.value.category = "重要交通生命线"
      }else if(form.value.category == "8"){
        form.value.category = "应急避难场所"
      }else if(form.value.category == "9"){
        form.value.category = "水库大坝"
      }else if(form.value.category == "10"){
        form.value.category = "其他"
      }

			form.value.prePhotos.split(",").map(item=>{
				prePhotosListData.value.push({
					imgUrl: import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item)
				})
			})
			form.value.checkPhotos.split(",").map(item=>{
				checkPhotosListData.value.push({
					imgUrl: import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item)
				})
			})
			form.value.courcePhotos.split(",").map(item=>{
				courcePhotosListData.value.push({
					imgUrl: import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item)
				})
			})
			form.value.drawing.split(",").map(item=>{
				drawingListData.value.push({
					imgUrl: import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item)
				})
			})
	  });
  };
  const downLoad = (url) => {
  	console.log(url)
  	location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(url);
  };

  // 挂载完成
	onMounted(() => {
		getData();
	})
  
  </script>
  
  <style scoped lang="scss">
  .app-container {
    min-height: 1080px;
  }
  .app-main {
    display: flex;
    justify-content: center;
    .app-center {
    	width: 100%;
    	.fontStyle{
    		font-size: 20px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
    	}
    	.fontStyle1{
    		cursor: pointer;
				color: #46FFFF;
    	}
    }
    .assy-inner-img{
    	position: absolute !important; 
    	top: 60px !important;
    	display: flex;
	    justify-content: space-around;
	    flex-wrap: wrap;
    }
    .assy-inner-text{
    	position: absolute !important; 
    	top: 60px !important;   
    	font-size: 18px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;	
			margin: 15px 25px 25px;
			overflow-y: scroll;
			height: 285px;
			line-height: 32px;
    }
    .app-left {
      margin-left: 30px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /*height: calc(100% - 40px);*/
      width: 450px;
  
      &-item {
        width: 450px;
        height: 380px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        display: inline-block;
        margin-left: 30px;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(1) {

        }
        &:nth-child(2) {
          margin-left: 20px;
        }
        &:nth-child(3) {
					margin-left: 20px;
        }
        &:nth-child(4) {
					margin-left: 20px;
        }
        
      }
    }
    .app-right {
      margin-right: 30px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /*height: calc(100% - 40px);*/
      width: 450px;

      &-item {
        width: 450px;
        height: 380px;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        display: inline-block;
      	margin-left: 30px;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(1) {

        }
        &:nth-child(2) {
          margin-left: 20px;
        }
        &:nth-child(3) {
					margin-left: 20px;
        }
        &:nth-child(4) {
					margin-left: 20px;
        }
      }
    }
  }
  .el-carousel {
    /*margin-top: 20px;*/
		width: 450px;
	 	
    :deep(.el-carousel__item) {
        /*display: flex;
        justify-content: space-around;
        flex-wrap: wrap;*/

        .banner-img {
        	margin: 25px;
          height: 240px;
          width: 400px;
        }
        
    }
}
// 指示器
:deep(.el-carousel__indicators) {
    padding: 0;
    display: flex;
    justify-content: center;

    .el-carousel__indicator {
        margin: 0 5px;

        .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #418DFD;
            cursor: pointer;
        }

        &.is-active {
            .el-carousel__button {
                background: #46FFFF;
                box-shadow: 0px 0px 6px 1px #46FFFF;
            }
        }
    }
}
  </style>
  